<!--NavMenu作为子组件导入Home.vue中-->
<template>
	<div id="NavMenu">
		<el-menu
	      default-active="2"
	      class="el-menu-vertical-demo"
	      @open="handleOpen"
	      @close="handleClose"
	      background-color="#545c64"
	      text-color="#fff"
	      active-text-color="#ffd04b"
	      style="border: none;"
	    >
	    	<el-submenu  v-for="(item,key,index) in allMenus" :key="key" :index="String(index)">
		        <template slot="title">
		          <i class="el-icon-location"></i>
		          <span>{{item.permissionDesc}}</span>
		        </template>
	        	<el-menu-item  v-for="(permission,permissionIndex) in item.children" 
		        	:key="permissionIndex" 
		        	:index="index+'-'+permissionIndex"
		       		@click="pushToView({name:permission.permissionDesc})"
	        	>
	            	{{permission.permissionDesc}}
	        	</el-menu-item>
	      	</el-submenu>
   		</el-menu>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		methods: {
			handleOpen() {

			},
			handleClose() {

			}
		},
		computed:{
			allMenus(){
				return this.$store.getters.allMenus;
			}
		},
		mounted(){
			var menus = JSON.parse(localStorage.getItem('response')).permissions;
			this.$store.commit('LOADALLMENUS',menus);
		}
	}
</script>

<style lang="scss" scoped>
#NavMenu{
        width: 200px;
        height: 100%;
        background: rgb(84, 92, 100);
    }
</style>